<template>
  <div id="insectdetection">
    <Title>
            <template #title>
                虫情测报
            </template>
    </Title>

    <div class="option">
        <Space size="large" wrap>
            创建时间
        <DatePicker type="date" placeholder="选择日期" style="width: 200px" :transfer="true"/>
    </Space>

    <Space>
        设备类型
        <Select v-model="model" style="width:200px" :transfer="true">
        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
    </Select>
    </Space>

    <Space size="large">
        设备ID
        <Input suffix="ios-search" placeholder="Enter text" style="width: auto" search/>
    </Space>   
    
    <Space wrap class="btn">
            <Button type="primary">查询</Button>
            <Button type="primary">拍照</Button>

        </Space>
    </div>

    <div class="view">
        <div class="image">
            <ImgShow class="imgshow">
                <template #time>
                    2022年12月10日 12：43
                </template>
            </ImgShow>
            <ImgShow class="imgshow">
                <template #time>
                    2022年12月10日 12：43
                </template>
            </ImgShow>
            <ImgShow class="imgshow">
                <template #time>
                    2022年12月10日 12：43
                </template>
            </ImgShow>
            <ImgShow class="imgshow">
                <template #time>
                    2022年12月10日 12：43
                </template>
            </ImgShow>
            <ImgShow class="imgshow">
                <template #time>
                    2022年12月10日 12：43
                </template>
            </ImgShow>
            <ImgShow class="imgshow">
                <template #time>
                    2022年12月10日 12：43
                </template>
            </ImgShow>
            <ImgShow class="imgshow">
                <template #time>
                    2022年12月10日 12：43
                </template>
            </ImgShow>
            <ImgShow class="imgshow">
                <template #time>
                    2022年12月10日 12：43
                </template>
            </ImgShow>
            <ImgShow class="imgshow">
                <template #time>
                    2022年12月10日 12：43
                </template>
            </ImgShow>
            <ImgShow class="imgshow">
                <template #time>
                    2022年12月10日 12：43
                </template>
            </ImgShow>
            <ImgShow class="imgshow">
                <template #time>
                    2022年12月10日 12：43
                </template>
            </ImgShow>
            <ImgShow class="imgshow">
                <template #time>
                    2022年12月10日 12：43
                </template>
            </ImgShow>
            <Page :total="100" show-total show-elevator class="page" v-if="bigwidth===true"/>
        </div>
        <Page :total="100" show-total show-elevator class="page" v-if="bigwidth===false"/>


        <div class="console" v-if="bigwidth===true">
            <div class="left">
                <div class="status">
                    温控状态：正常
                </div>
                <div class="temview">
                    <TemperatureView :data="data"></TemperatureView>
                </div>
            </div>
            <div class="right">
                <Console></Console>
            </div>
        </div>

        <Tabs value="status" v-else>
        <TabPane label="状态" name="status">
            <div class="left">
                <div class="status">
                    温控状态：正常
                </div>
                <div class="temview">
                    <TemperatureView :data="data"></TemperatureView>
                </div>
            </div>
        </TabPane>
        <TabPane label="操作台" name="option">
            <div class="right">
                <Console></Console>
            </div>
        </TabPane>
    </Tabs>
    </div>

  </div>
</template>

<script>
import Title from '@/components/device/Title.vue'
import TemperatureView from '@/components/device/insectdetction/TemperatureView.vue';
import Console from '@/components/device/insectdetction/Console.vue'
import ImgShow from '@/components/device/insectdetction/ImgShow.vue';
import {Space,DatePicker,Select,Option,Input,Button,Page,Tabs,TabPane} from 'view-ui-plus'
export default {
    name:'insectdetection',
    components:{
        Title,Space,DatePicker,Select,Option,Input,Button,ImgShow,Page,TemperatureView,Console,Tabs,TabPane
    },
    data(){
        return {
            data:[
                {
                    content:"低温限值",
                    value:"5℃"
                },
                {
                    content:"高温限值",
                    value:"70℃"
                },
                {
                    content:"环境温度",
                    value:"12℃"
                },
                {
                    content:"环境湿度",
                    value:"97%RH"
                },
            ],
            cityList:[
            {
                    value: '测报灯',
                    label: ' 测报灯'
                },
                {
                    value: '杀虫灯',
                    label: '杀虫灯'
                },
                {
                    value: '监控',
                    label: '监控'
                }
            ],
            bigwidth:null,

        }
    },
    activated(){
     
    },
    created() {
        this.getwidth();
    },
    mounted() {
        window.addEventListener('resize', () => {
            return (() => {
                this.$nextTick(() => {
                    this.bigwidth = window.innerWidth > 820 ? true : false;

                })
            })();
        });
    },
    methods:{
        getwidth() {
            console.log("device", window.innerWidth);
            this.bigwidth = window.innerWidth > 820 ? true : false;
        },
    }
}
</script>

<style lang="less" scoped>
.view{
    height: 100%;
    display: flex;
    justify-content: space-around;
    margin-top: 3rem;
    
    .image{
        width: 40%;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        overflow:scroll;
        
        height:60vh;
        .imgshow{
            width:30%;
        }
        .page{
            text-align: center;
            width:39%;
            position: fixed;
            bottom: 20px;
        }
}
    .console{
        height: 100%;
        width: 55%;
        display: flex;
        justify-content: space-around;
        .left{
            // width: 30%;
            width:30%;
            .status{
                border: 1px solid gray;
                padding: 1rem;
                text-align: center;

            }
            .temview{
                border: 1px solid gray;
                padding: 2.25rem;
                margin-top: 2.5rem;
                
            }
        }
        .right{
            padding: 1rem 2rem;
            border: 1px solid gray;
            width: 65%;
            
        }
    }
}

@media screen and (max-width: 821px) {
.view{
    font-size: calc(100vw * 30 / 1920);

    display: block;
    .image{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    font-size: calc(100vw * 50 / 1920);
    text-align: center;
    height:30vh;
        .imgshow{
            width: 45%;
        }
    }
    .page{
            width:98%;
            text-align: center;
        margin: 10px 0;
        }

        .left{
            width: 100%;
            .status{
    font-size: calc(100vw * 60 / 1920);

                border: 1px solid gray;
                padding: 1rem;
                text-align: center;

            }
            .temview{
    font-size: calc(100vw * 70 / 1920);

                width: 60%;
                margin-left: 20%;
                
            }
        }
        .right{
    font-size: calc(100vw * 60 / 1920);

            padding: 1rem 2rem;
            border: 1px solid gray;
            width: 100%;
            
        }

}
    .btn{
        margin-left: 25%;
    }
}

</style>

<style lang="less">
.image{
    .ivu-image{
        width:100% !important;
    }
}
.ivu-tabs{
    z-index: 0;
}

</style>
